import React, { Children, useEffect, useState } from "react";
import classNames from "classnames";
import { TreeData } from "./Tree";
import { on } from "events";
import Icon from "../Icon";
import { faPlusSquare, faSpinner } from "@fortawesome/free-solid-svg-icons";
import {
  faMinusSquare,
  faFolder,
  faFileAlt,
} from "@fortawesome/free-regular-svg-icons";
import { log } from "console";
export interface TreeNodeProps {
  data: TreeData;
  checkable?: boolean;
  onCollapse: (key: string) => void;
  onselect?: (key: string) => void;
  onCheck: (key: string, checked: boolean) => void;
  requestData?: (key: string) => Promise<TreeData[]>;
  selectedKey?: string;
  setSelectedKey?: React.Dispatch<React.SetStateAction<string | undefined>>;
  // virtualData?: KeyNodeMap;
}

export interface KeyNodeMap {
  [key: string]: TreeData;
}
const TreeNode = (props: TreeNodeProps) => {
  let {
    data: { name, children, key, collapsed, checked, type, icon, loading },
    onCollapse,
    onCheck,
    requestData,
    checkable,
    onselect,
    selectedKey,
    setSelectedKey,
    // virtualData,
  } = props;
  let caret = null;

  if (children && children.length > 0) {
    if (collapsed) {
      caret = (
        <Icon
          icon={faPlusSquare}
          onClick={() => onCollapse(key)}
          theme={"primary"}
          className="icon"
        ></Icon>
      );
    } else {
      caret = (
        <Icon
          icon={faMinusSquare}
          onClick={() => onCollapse(key)}
          className="icon"
        ></Icon>
      );
    }
  } else {
    if (requestData) {
      if (loading) {
        caret = (
          <Icon
            icon={faSpinner}
            onClick={() => onCollapse(key)}
            className="icon loadingIcon"
          ></Icon>
        );
      } else {
        if (type == "folder") {
          caret = (
            <Icon
              icon={faPlusSquare}
              onClick={() => onCollapse(key)}
              theme={"primary"}
              className="icon"
            ></Icon>
          );
        }
      }
    }
  }
  const handleClick = (key: string) => {
    if (setSelectedKey) {
      setSelectedKey(() => key);
    }
    if (onselect) {
      onselect(key);
    }
  };
  const contentClassName = classNames("content", {
    "content-click": selectedKey == key,
  });
  return (
    <div className="tree-node">
      <div className="inner">
        <div className={contentClassName} onClick={() => handleClick(key)}>
          <div className="content-iconBox">
            {caret}
            {checkable && (
              <input
                type="checkBox"
                checked={checked}
                className="checkBoxInput"
                onChange={() => onCheck(key, !checked)}
              />
            )}
            {type === "folder" ? (
              <Icon icon={icon ? icon : faFolder} className="icon"></Icon>
            ) : (
              <Icon icon={icon ? icon : faFileAlt} className="icon"></Icon>
            )}
          </div>
          {name}
        </div>
      </div>
      {children && children.length > 0 && !collapsed && (
        <div className="children">
          {children.map((item: TreeData) => (
            <TreeNode
              data={item}
              onCollapse={onCollapse}
              key={item.key}
              onCheck={onCheck}
              checkable={checkable}
              requestData={requestData}
              onselect={handleClick}
              selectedKey={selectedKey}
            />
          ))}
        </div>
      )}
    </div>
  );
};

export default TreeNode;
